<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>注册页面</title>
  <!--    引入格式文件-->
  <link rel="stylesheet" href="./css/reg.css" />
</head>

<body>
  <style></style>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <form action="#" method="post">
          <table>
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" id="username" name="username" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                <input type="password" id="password" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="phone">手机号</label></td>
              <td class="td_right">
                <input type="text" id="phone" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">性别</label></td>
              <td class="td_right">
                <label><input type="radio" name="sex" id="sex" value="1" checked />男</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="sex" id="sex" value="0" />女</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">是否VIP</label></td>
              <td class="td_right">
                <label><input type="radio" name="vip" id="vip" value="1" />是</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="vip" id="vip" value="0" checked />否</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="question">密保问题</label></td>
              <td class="td_right">
                <input type="text" id="question" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="answer">密保答案</label></td>
              <td class="td_right">
                <input type="text" id="answer" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="avatar">头像</label></td>
              <td class="td_right">
                <input type="text" id="avatar" disabled />
                <button>选择图片</button><input type="file" hidden />
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="立即注册" id="btn_sub" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有账号？<a href="">立即登录</a></p>
    </div>
  </div>
  <script src="../jquery.min.js"></script>
  <script src="../axios.js"></script>
  <script>
    // 设置统一的登录接口
    axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
    function checkForm() {
      //获取用户名输入项
      let inputObj = document.getElementById("username");
      //获取输入项的值
      let uValue
      inputObj.addEventListener('change', names)
      function names() {
        uValue = inputObj.value;
        // console.log(uValue);
        // console.log(uValue.length);
        //用户名长度不能低于6位 
        if (uValue.length < 6) {
          alert("对不起,您输入的账号长度太短了");
          return false;
        }
        return true
      }

      //密码长度大于6 和确认必须一致
      //获取密码框输入的值
      let input_password = document.getElementById("password");
      input_password.addEventListener('change', pass)
      let uPass
      function pass() {
        uPass = input_password.value;
        if (uPass.length < 6) {
          alert("对不起,您输入的密码长度太短了");
          return false;
        }
        return true
      }
      //获取确认密码框的值
      // let input_repassword = document.getElementById("repassword");
      // let uRePass = input_repassword.value;
      // input_repassword.addEventListener('change', passs)
      // function passs() {
      //   if (uPass != uRePass) {
      //     alert("对不起,两次密码不一致!");
      //     return false;
      //   }
      //   return true
      // }
      //校验手机号
      let input_mobile = document.getElementById("phone");
      input_mobile.addEventListener('change', mobile)
      let uMobile
      function mobile() {
        uMobile = input_mobile.value;
        if (!/^[1][3578][0-9]{9}$/.test(uMobile)) {

          alert("对不起,您的手机号无法识别，请重新输入");
          return false;
        }
        return true;
      }

      let form = document.querySelector(".rg_center .rg_form form");
      form.addEventListener("submit", async function (e) {
        e.preventDefault();
        // console.log(uValue,
        // );
        // console.log(uPass,
        // );
        // console.log($('#sex').val(),
        // );
        // console.log($('#vip').val()
        // );
        // console.log($('#question').val(),
        // );
        // console.log($('#answer').val(),);
        // console.log($(this).serialize())
        // let data = $(this).serialize() + '&description=ok'
        // let data = $(this).serialize();
        const sex = +$("[name=sex]:checked").val()
        // $("input[name='sex']:checked").val()
        const vip = +$("[name=vip]:checked").val()
        // console.log(sex);
        // console.log(vip);
        if (names() && pass() && mobile()) {
          const { data: res } = await axios.post('/user/reg', {
            username: uValue,
            password: uPass,
            phone: uMobile,
            sex,
            vip,
            question: $('#question').val(),
            answer: $('#answer').val(),
            description: '无'
          })
          // console.log(res);
          if (!res.success) return alert("注册失败：" + res.msg);
          alert(res.msg);
          location.href = "../01-loginBaseCode/login.html";
        } else {
          e.preventDefault()
        }

      });

    }

    checkForm()









  </script>
</body>

</html>